<template>
  <section>
		<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
			<span class="title">检索管理</span>
			<div class="body">
				<span>线路名称:</span>
				<select class="firstSelect" v-model="line" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}" @change="getTeacher">
					<option v-for="item in lineOption" :label="item" :value="item"></option>
				</select>
				<span>跟车老师:</span>
				<select class="select" v-model="teacher" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
					<option v-for="item in teacherOption" :label="item" :value="item"></option>
				</select>
				<el-button type="primary" @click="getTableData()" size="small">搜索</el-button>
        <el-button type="primary" @click="clearSearchData()" size="small">重置</el-button>
				<div class="right">
					<a :href="this._httpUrl + `schoolbus/manage/line/query/export?yxt-xtoken=${exportUrl}`">
            <el-button type="primary" size="small">导出</el-button>
          </a>
					<el-button type="success" @click="upshow()" size="small">新增</el-button>
				</div>
			</div>
		</div>

		<div class="model site">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
			<span class="title">校车路线</span>
			<div class="kong"></div>
			<template>
				<el-table :data="tableData" style="100%">
					<el-table-column prop="id" label="#" align="center"></el-table-column>
					<el-table-column prop="lineName" label="线路名称" align="center"></el-table-column>
					<el-table-column prop="num" label="人数" align="center"></el-table-column>
					<el-table-column prop="teacherName" label="跟车老师" align="center"></el-table-column>
					<el-table-column prop="phone" label="手机号" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template scope="scope">
							<el-button size="small" @click="delectData(scope)">删除</el-button>
							<el-button size="small" @click="modifySite(scope)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="15"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
			</template>
		</div>

		<div class="up" v-show="upShow">
			<img :src="IMGBASE64.GREENXINZENG2X" class="green">
			<span class="title">新增站点</span>
      <el-button icon="el-icon-close" class="close" @click="upshow()"></el-button>
			<div class="kong"></div>
			<div class="form">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="线路名称">
						<el-input v-model="form.lineName" size="small"></el-input>
					</el-form-item>
					<el-form-item label="跟车老师">
            <el-select v-model="form.teachName" @change="getPhone" size="small">
              <el-option v-for="item in teacherOption" :label="item" :value="item"></el-option>
            </el-select>
					</el-form-item>
					<el-form-item label="联系电话">
						<el-input v-model="form.phone" :disabled='true' size="small"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="bottom">
				<div class="left">
					<el-checkbox v-model="checked">继续添加</el-checkbox>
				</div>
				<div class="right">
					<el-button type="success" @click="addRoute" size="small">确定</el-button>
          <el-button @click="upshow()" size="small">取消</el-button>
				</div>
			</div>
		</div>

    <div class="up" v-show="isModify">
      <img :src="IMGBASE64.GREENXINZENG2X" class="green">
      <span class="title">修改站点</span>
      <div class="kong"></div>
      <div class="form">
        <el-form ref="form" :model="modifyForm" label-width="100px">
          <el-form-item label="线路名称">
            <el-input v-model="modifyForm.lineName" size="small"></el-input>
          </el-form-item>
          <el-form-item label="跟车老师">
            <el-select v-model="modifyForm.teachName" @change="getPhone" size="small">
              <el-option v-for="item in teacherOption" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="modifyForm.phone" :disabled='true' size="small"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom">
        <div class="center">
          <el-button type="success" @click="confirmModify" size="small">确定</el-button>
          <el-button @click="modifyShow()" size="small">取消</el-button>
        </div>
      </div>
    </div>

		<transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      exportUrl: null,
      lineOption: [],
      line: null,
      teacherOption: [],
      teacher: null,
      tableData: [],
      checked: null,
      isSuccess: false,
      isModify: false,
      upShow: false,
      total: 0,
      page: 1,
      paging: true,
      allData: [],
      form: {
        lineName: null,
        teachName: null,
        phone: null
      },
      modifyForm: {
        lineName: null,
        teachName: null,
        phone: null,
        id: null
      }
    }
  },
  mounted () {
    this.getOptionData()
    this.getTableData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    getPhone () {
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.form.teachName === this.tableData[i].teacherName) {
          this.form.phone = this.tableData[i].phone
        }
        if (this.modifyForm.teachName === this.tableData[i].teacherName) {
          this.modifyForm.phone = this.tableData[i].phone
        }
      }
    },
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
    },
    modifyShow () {
      this.isModify = !this.isModify
      this.isSuccess = !this.isSuccess
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getOptionData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/lineAndTeacher', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.allData = response.data.data
          for (var i = 0; i < response.data.data.length; i++) {
            this.lineOption.push(response.data.data[i].lineName)
            this.teacherOption.push(response.data.data[i].teacherName)
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/line/query', {page: (this.page), rows: 15, lineName: this.line, teacherName: this.teacher}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    addRoute () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/line/add', {lineName: this.form.lineName, teacherName: this.form.teachName, phone: this.form.phone}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
      if (this.checked === true) {
        this.form.lineName = null
        this.form.teachName = null
        this.form.phone = null
        this.checked = false
      } else {
        this.form.lineName = null
        this.form.teachName = null
        this.form.phone = null
        this.upShow = !this.upShow
        this.isSuccess = !this.isSuccess
      }
    },
    delectData (scoped) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/line/del', {id: scoped.row.id}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code) {
          this.getTableData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    modifySite (scope) {
      this.isModify = !this.isModify
      this.isSuccess = !this.isSuccess
      this.modifyForm.lineName = scope.row.lineName
      this.modifyForm.teachName = scope.row.teacherName
      this.modifyForm.phone = scope.row.phone
      this.modifyForm.id = scope.row.id
    },
    confirmModify () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/line/update', {id: this.modifyForm.id, lineName: this.modifyForm.lineName, teacherName: this.modifyForm.teachName, phone: this.modifyForm.phone}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.isModify = !this.isModify
          this.isSuccess = !this.isSuccess
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTeacher () {
      this.teacherOption = []
      for (var i = 0; i < this.allData.length; i++) {
        if (this.line === this.allData[i].lineName) {
          this.teacherOption.push(this.allData[i].teacherName)
        }
      }
    },
    clearSearchData () {
      this.line = null
      this.teacher = null
      this.getOptionData()
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .firstSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        margin-right: 2%;
      }
      .right{
        float: right;
        margin-right: 10px;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
  }

  .up{
  	width: 40%;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -20%;
    background: #FFF;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
    z-index: 99999;
  	.green{
		  position: absolute;
		  left: 4%;
		  top: -20px;
		}
		.title{
      margin-left: 90px;
    }
    .form{
    	width: 80%;
    }
    .bottom{
			padding: 10px 30px;
			border-top: 1px solid #D7D7D7;
			background: #F8F8F8;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
			.left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
      .center{
        text-align: center;
      }
    }
  }

  // .modal-backdrop{
  //   background: #000;
  //   position: fixed;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   z-index: 2;
  //   opacity: .5;
  // }
</style>
